<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="客服会话" :width="800">
    <template #footer>
      <div class="chat-input">
        <a-textarea v-model:value="messageContent" :rows="3" placeholder="请输入消息内容" @keyup.enter="handleSend" />
        <div class="input-actions">
          <a-button type="primary" @click="handleSend">发送</a-button>
        </div>
      </div>
    </template>
    <div class="chat-container">
      <div class="chat-messages" ref="messageContainer">
        <div v-for="(item, index) in data" :key="index" class="message-item"
          :class="{ 'message-right': item.senderType === 1, 'message-left': item.senderType === 0 }">
          <div class="avatar">
            <a-avatar :src="item.senderAvatar_dictText" />
          </div>
          <div class="message-content">
            <div class="message-bubble">
              {{ item.content }}
            </div>
            <div class="message-time">
              {{ item.createTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { list, saveOrUpdate } from '../AssistanceMsg.api';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';

interface MessageItem {
  senderType: number;
  senderAvatar_dictText: string;
  content: string;
  createTime: string;
}

const { createMessage } = useMessage();
const data = ref<MessageItem[]>([]);
const messageContent = ref('');
const messageContainer = ref<HTMLElement | null>(null);
const currentSessionId = ref('');

// Emits声明
const emit = defineEmits(['register', 'success']);

//表单赋值
const [registerModal] = useModalInner(async (sessionId: string) => {
  currentSessionId.value = sessionId;
  const { records } = await list({ sessionId })
  data.value = records as MessageItem[];
  await scrollToBottom();
});

// 发送消息
async function handleSend() {
  if (!messageContent.value.trim()) {
    createMessage.warning('请输入消息内容');
    return;
  }

  try {
    await saveOrUpdate({
      sessionId: currentSessionId.value,
      content: messageContent.value,
      senderType: 1 // 客服发送
    }, false);
    messageContent.value = '';
    const { records } = await list({ sessionId: currentSessionId.value });
    data.value = records as MessageItem[];
    await scrollToBottom();
  } catch (error) {
    createMessage.error('发送消息失败');
  }
}

// 滚动到底部
async function scrollToBottom() {
  await nextTick();
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
  }
}
</script>

<style lang="less" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: #f5f5f5;

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    /* 隐藏滚动条但保持滚动功能 */
    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    .message-item {
      display: flex;
      margin-bottom: 16px;

      &.message-right {
        flex-direction: row-reverse;

        .message-content {
          margin-right: 12px;
          margin-left: 0;

          .message-bubble {
            background: #1890ff;
            color: #fff;
            border-radius: 12px 2px 12px 12px;
          }
        }
      }

      &.message-left {
        .message-content {
          margin-left: 12px;
          margin-right: 0;

          .message-bubble {
            background: #fff;
            color: #333;
            border-radius: 2px 12px 12px 12px;
          }
        }
      }

      .avatar {
        width: 40px;
        height: 40px;
      }

      .message-content {
        max-width: 60%;

        .message-bubble {
          padding: 12px;
          word-break: break-all;
        }

        .message-time {
          font-size: 12px;
          color: #999;
          margin-top: 4px;
          text-align: right;
        }
      }
    }
  }
}

.chat-input {
  padding: 16px;
  background: #fff;

  .input-actions {
    margin-top: 12px;
    text-align: right;
  }
}
</style>